<template>
<!-- 媒体分析 -->
    <view class='media_box'>
        <view class='media_title'>媒体参与分布图</view>
        <pie :width='charts_width' :pie_data='pie_data' :id="'media_pie'"></pie>
        <view class='data_list'>
            <view v-for='(item,index) in pie_data' :key='index'>
                <view :style='{background: item.color}'></view>
                <text>{{item.name}}（{{(item.data*100).toFixed(2)}}%）</text>
            </view>
        </view>

        <view class='media_title' style='padding: 0'>整体境内外分布</view>
        <ring :width='charts_width' :ring_data='ring_data'></ring>
    </view>
</template>

<script>

    import pie from './charts/pie.vue'
    import ring from './charts/ring.vue'
    import color from './charts/color.js'

    export default {
        components: {
           pie,
           ring
        },
        props: {
            content: Object
        },
        data() {
            return {
                charts_width: 0,
                color,
                pie_data: [],
                ring_data: [],
            }
        },
        async mounted() {
            // participation 参与
            // foreign    境外   1 境内   2 境外
            let total = 0;
            this.content.participation.forEach(val => {
                total += val.hot
            });
            this.content.participation.forEach((val,i) => {
                let obj = {
                    name: this.$convert(val.sourcetype),
                    data: val.hot/total,
                    color: this.color[i]
                }
                this.pie_data.push(obj)
            });
            this.content.foreign.forEach((val,i) => {
                let obj = {
                    name: val.foreign == 1 ? "境内": "境外",
                    data: val.count,
                    color: this.color[i]
                }
                this.ring_data.push(obj)
            });
           this.charts_width = await this.$getDomInfo(".charts_box","width");
        }
    }
</script>

<style lang="scss" scoped>
.media_box {
    width: 100%;
    .media_title {
        width: 100%;
        font-size: 24upx;
        color: #333;
        font-weight: 600;
        padding-bottom: 10upx;
        box-sizing: border-box;
    }
    .data_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20upx;
        >view {
            width: 50%;
            display: flex;
            align-items: center;
            font-size: 24upx;
            color: #666;
            margin-bottom: 25upx;
            >view {
                width: 12upx;
                height: 12upx;
                border-radius: 100%;
                margin-right: 10upx;
                background: #f00;
            }
        }
    }
}
</style>